<template>
  <div
    class="editor"
    :style="{
      width: `${props.width}px`
    }"
  >
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="contentModel"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />

    <KoiDialog ref="koiDialogRef" title="附件管理" footer-hidden :width="1400" :height="700">
      <template #content>
        <ColeAttachmentDialog
          :can-uploaded-num="99999"
          :type="type"
          :can-selected-limit="99999"
          :already-selected="0"
          @handle-submit="handleSubmit"
        ></ColeAttachmentDialog>
      </template>
    </KoiDialog>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

// @ts-ignore
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

// 定义参数的类型
interface ITagProps {
  content?: any;
  width?: any;
}
// 子组件接收父组件的值
// withDefaults：设置默认值  defineProps：接收父组件的参数
// @ts-ignore
const props = withDefaults(defineProps<ITagProps>(), {
  content: "",
  width: 800
});

const emits = defineEmits(["update:content"]);

const contentModel = ref(props.content);
const mode = ref("default");
watch(
  () => contentModel.value,
  () => {
    // 父组件传递回显数据
    emits("update:content", contentModel.value);
  }
);

watch(
  () => props.content,
  () => {
    // 父组件传递回显数据
    contentModel.value = props.content;
  }
);

const editorRef = shallowRef();

const toolbarConfig = {
  insertKeys: {
    index: 21, // 插入的位置，基于当前的 toolbarKeys
    keys: ["SearchImageMenu", "SearchVideoMenu"]
  },
  excludeKeys: ["group-image", "group-video"]
};

const editorConfig = { placeholder: "请输入内容..." };

onMounted(() => {});

// // 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const type = ref("image");
const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  // 监听事件
  editor.on("SearchImageMenuClick", () => {
    type.value = "image";
    koiDialogRef.value.koiOpen();
  });
  editor.on("SearchVideoMenuClick", () => {
    type.value = "video";
    koiDialogRef.value.koiOpen();
  });
};
const koiDialogRef = ref();

const handleSubmit = (files: any) => {
  koiDialogRef.value.koiClose();
  files.map((r: any) => {
    let node;
    if (type.value == "image") {
      node = {
        type: "image",
        src: r.url,
        file: null, // 需要上传的文件
        mode: "full", // 居中middle还是全宽full
        children: [{ text: "" }] // 用于放置备注
      };
    } else {
      node = {
        type: "video",
        src: r.url,
        // poster: r.poster, //封面
        file: null, // 需要上传的文件
        children: [{ text: "" }] // 用于放置备注
      };
    }
    editorRef.value.insertNode(node);
  });
};
</script>

<style lang="scss" scoped>
.editor {
  border: 1px solid #ccc;
}
</style>
